<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <div slot="header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="班级" class="el-search-item">
			  <el-select v-model="searchForm.className" clearable placeholder="选择班级">
				<el-option value="七年级 1班">七年级 1班</el-option><el-option value="七年级 2班">七年级 2班</el-option><el-option value="七年级 3班">七年级 3班</el-option>
				<el-option value="七年级 4班">七年级 4班</el-option><el-option value="七年级 5班">七年级 5班</el-option><el-option value="七年级 6班">七年级 6班</el-option>
				<el-option value="七年级 7班">七年级 7班</el-option><el-option value="七年级 8班">七年级 8班</el-option><el-option value="七年级 9班">七年级 9班</el-option>
				<el-option value="七年级 10班">七年级 10班</el-option>
				<el-option value="八年级 1班">八年级 1班</el-option><el-option value="八年级 2班">八年级 2班</el-option><el-option value="八年级 3班">八年级 3班</el-option>
				<el-option value="八年级 4班">八年级 4班</el-option><el-option value="八年级 5班">八年级 5班</el-option><el-option value="八年级 6班">八年级 6班</el-option>
				<el-option value="八年级 7班">八年级 7班</el-option><el-option value="八年级 8班">八年级 8班</el-option>
			  </el-select>
            </el-form-item>
			<el-form-item label="姓名" class="el-search-item">
			  <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable></el-input>
			</el-form-item>
            <el-form-item class="el-search-item">
              <el-button type="success" plain icon="el-icon-search" @click="searchGetDate">查询我的选课</el-button>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button type="primary" plain icon="el-icon-plus" @click="openAdd">录入我的选课</el-button>
            </el-form-item>
			<span>{{doMsgShow}}</span>
          </el-form>
        </div>
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
			<el-table-column label="课程" align="center" sortable>
				<template slot-scope="scope">{{scope.row.grade}}<br/>{{scope.row.course}}</template>
			</el-table-column>
			<el-table-column prop="slZg" label="人数" align="center" sortable></el-table-column>
			<el-table-column label="剩余" align="center" sortable>
				<template slot-scope="scope">{{scope.row.slZg-scope.row.slYx}}</template>
			</el-table-column>
        </el-table>
        <!--分页组件
        <el-pagination style="padding:0;text-align: center;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                       :current-page="pageNum" :page-sizes="[8, 15, 20]" :page-size="pageSize" :total="total">
        </el-pagination> -->
      </el-card>
      <!--新增用户对话框-->
      <el-dialog title="录入两项选修课" :visible.sync="dialog.visible" width="85%">
        <el-form :rules="rules" ref="schoolCourseSelectionForm" :model="schoolCourseSelectionForm" size="small" label-width="70px">
			<el-form-item prop="className" label="班级">
				<el-select v-model="schoolCourseSelectionForm.className" clearable placeholder="选择班级" @change="xuanZheNJ">
					<el-option value="七年级 1班">七年级 1班</el-option><el-option value="七年级 2班">七年级 2班</el-option><el-option value="七年级 3班">七年级 3班</el-option>
					<el-option value="七年级 4班">七年级 4班</el-option><el-option value="七年级 5班">七年级 5班</el-option><el-option value="七年级 6班">七年级 6班</el-option>
					<el-option value="七年级 7班">七年级 7班</el-option><el-option value="七年级 8班">七年级 8班</el-option><el-option value="七年级 9班">七年级 9班</el-option>
					<el-option value="七年级 10班">七年级 10班</el-option>
					<el-option value="八年级 1班">八年级 1班</el-option><el-option value="八年级 2班">八年级 2班</el-option><el-option value="八年级 3班">八年级 3班</el-option>
					<el-option value="八年级 4班">八年级 4班</el-option><el-option value="八年级 5班">八年级 5班</el-option><el-option value="八年级 6班">八年级 6班</el-option>
					<el-option value="八年级 7班">八年级 7班</el-option><el-option value="八年级 8班">八年级 8班</el-option>
				</el-select>
			</el-form-item>
          <el-form-item prop="name" label="姓名">
            <el-input v-model="schoolCourseSelectionForm.name" placeholder="请输入姓名" auto-complete="off" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item prop="course71" label="周二课" v-show="qiNianJi">
			<el-radio-group v-model="schoolCourseSelectionForm.course71">
				<el-radio v-for="iv in course71List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
			</el-radio-group>
          </el-form-item>
		  <el-form-item prop="course72" label="周三课" v-show="qiNianJi">
		  	<el-radio-group v-model="schoolCourseSelectionForm.course72">
		  		<el-radio v-for="iv in course72List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
		  	</el-radio-group>
		  </el-form-item>
		  <el-form-item prop="course81" label="周二课" v-show="baNianJi">
		  	<el-radio-group v-model="schoolCourseSelectionForm.course81">
		  		<el-radio v-for="iv in course81List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
		  	</el-radio-group>
		  </el-form-item>
		  <el-form-item prop="course82" label="周三课" v-show="baNianJi">
		  	<el-radio-group v-model="schoolCourseSelectionForm.course82">
		  		<el-radio v-for="iv in course82List" :label="iv.course" :key="iv.course">{{iv.course}}<span style="color:blue;">{{iv.slZg-iv.slYx}}</span></el-radio>
		  	</el-radio-group>
		  </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : '提交'}}</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
  import test_schoolCourseSelection from "@/api/test/schoolCourseSelection";
  export default {//vue3
    data() {
		// 添加自定义校验规则
		const validateCourseDg = (rule, value, callback) => {
		    if (value.length!=2) {
				callback(new Error('选择两项课程'));
		    } else {
				callback();
		    }
		}
      return {
        // 表格数据
        tableData: [],
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 200000,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
        checkedTime: '',
        // 查询参数
        searchForm: {name: null, className: null,},
        // 弹出层
        dialog: {flag: 0, dialogTitle: "", visible: false},
        // 菜单弹出层
        menuDialog: {dialogTitle: "", visible: false},
        // 表单参数
        schoolCourseSelectionForm: {
          schoolCourseSelectionId: null,
          name: null,
          className: null,
          numb: null,
          phone: null,
          course71: null,
		  course72: null,
		  course81: null,
		  course82: null,
        },
		course71List: [],
		course72List: [],
		course81List: [],
		course82List: [],
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          name: [{required: true,trigger: "change",message: "请输入名称"}],
          className: [{required: true,trigger: "change",message: "请输入班级"}],
		  //course71: [{required: true,trigger: "change",message: "请选择"}],
		  //course72: [{required: true,trigger: "change",message: "请选择"}],
		  //course81: [{required: true,trigger: "change",message: "请选择"}],
		  //course82: [{required: true,trigger: "change",message: "请选择"}],
          courseDg: [{required: true,trigger: "change",message: "请选择课程"},{validator: validateCourseDg,trigger: "change",message: "请选择两项课程"}],
        },
        // 所有权限数据
        treeData: [],
        // 树形控件的属性绑定对象
        treeProps: {children: 'children', label: 'label'},
        // 默认选中的节点id值
        defKeys: [],
        // 角色id
        roleId: null,
		qiNianJi: false,
		baNianJi: false,
		doMsgShow:null,
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
    },
    created() {
      this.getDataList();
    },
    watch: {
      "checkedTime"(value) {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
        if (value != null) {
          let timeArr = value.toString().split(",");
          timeArr.forEach((item,i) => {
            if(i === 0) {
              this.searchForm.startTime = item;
            }else {
              this.searchForm.endTime = item;
            }
          });
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
        this.getDataList()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getDataList()
      },
	  searchGetDate(){
		  if(this.searchForm.name && this.searchForm.className && this.searchForm.name.length>0 && this.searchForm.className.length>0){
			  this.getDataList();
		  }else{
			  this.$message.error("请输入姓名和班级");
			  return false;
		  }
	  },
      // 获取列表
      getDataList() {
        test_schoolCourseSelection.list({
          name: this.searchForm.name,
		  className: this.searchForm.className,
        }).then(res => {
          if(res.data.code === 2000) {
			if(res.data.data){
			  	if(res.data.data.length>2){
					this.$message.success(res.data.msg);
					this.doMsgShow = res.data.msg;
				}else if(res.data.data.length==2){
					this.$message.success("以下是您选择的课程：");
					this.doMsgShow = "以下是您选择的课程：";
				}else{
					this.$message.error("没有您选择的课程！请检查姓名和班级！");
					this.doMsgShow = "没有您选择的课程！请检查姓名和班级！";
				}
			}else{
				this.$message.error("没有您选择的课程！请检查姓名和班级！");
				this.doMsgShow = "没有您选择的课程！请检查姓名和班级！";
			}
            this.tableData = res.data.data;
          }
        })
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("schoolCourseSelectionForm");
        this.dialog.dialogTitle = "录入我的选课";
        this.dialog.visible = true;
		test_schoolCourseSelection.getKxsl().then(res => {
		  if (res.data.code === 2000) {
		    this.course71List = res.data.data["七年级周二"];
			this.course72List = res.data.data["七年级周三"];
			this.course81List = res.data.data["八年级周二"];
			this.course82List = res.data.data["八年级周三"];
		  }
		});
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("schoolCourseSelectionForm");
        this.dialog.dialogTitle = "编辑";
        this.dialog.visible = true;
        this.getById(row.schoolCourseSelectionId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.schoolCourseSelectionForm.validate(valid => {
          if(valid){
			if(this.schoolCourseSelectionForm.className.startsWith('七年级')){
				if(this.schoolCourseSelectionForm.course71 && this.schoolCourseSelectionForm.course72){}else{
					alert("请您选择两门课程！");
					return false;
				}
			}else{
				if(this.schoolCourseSelectionForm.course81 && this.schoolCourseSelectionForm.course82){}else{
					alert("请您选择两门课程！");
					return false;
				}
			}
			if(confirm('请再次核对您选择的课程，确定提交吗？')){
			}else{
				return false;
			}
            this.loading.status = true;
            test_schoolCourseSelection.saveOrUpdate(this.schoolCourseSelectionForm,this.dialog.flag).then(res => {
              if (res.data.code === 2000) {
                this.$message.success(res.data.msg);
                if(this.dialog.flag === 0){
                  this.pageNum = 1;
                }
                this.getDataList();
                // 关闭弹框
                this.dialog.visible = false;
                // 关闭加载
                this.loading.status = false;
              }else{
                this.$message.error(res.data.msg);
                this.loading.status = false;
                return false;
              }
            })
          }
        });
      },
      // 根据id获取信息
      getById(id) {
        test_schoolCourseSelection.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.schoolCourseSelectionForm.schoolCourseSelectionId = res.data.data.schoolCourseSelectionId;
            this.schoolCourseSelectionForm.name = res.data.data.name;
            this.schoolCourseSelectionForm.className = res.data.data.className;
            this.schoolCourseSelectionForm.numb = res.data.data.numb;
            this.schoolCourseSelectionForm.phone = res.data.data.phone;
            //this.schoolCourseSelectionForm.course1 = res.data.data.course1;
			//this.schoolCourseSelectionForm.course2 = res.data.data.course2;
          }
        });
      },
      // 根据id删除
      deleteFun(row) {
        this.$confirm("确定删除当前吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
            test_schoolCourseSelection.remove(row.schoolCourseSelectionId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList()
            }else {
              this.$message.error(res.data.msg);
            }
          })
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
	  xuanZheNJ(){
		if (this.schoolCourseSelectionForm.className.startsWith('七年级')) {
			this.qiNianJi = true;this.baNianJi = false;
		}else{
			this.qiNianJi = false;this.baNianJi = true;
		}
	  },
	  getKxsl(){
		  
	  },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {
    margin-bottom: 0;
  }
  .el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
  }
  .el-card/deep/.el-card__header {
    border-bottom: none !important;padding: 10px 10px !important;
  }
</style>